<script lang="ts" setup>
import loginBg1 from "@/assets/login_bg_1.png";
import loginBg2 from "@/assets/login_bg_2.png";
import login_bg3 from '@/assets/login/居中背景图.png'
import login_bg4 from '@/assets/login/翰海睿智登录页logo.png'

import login_bg5 from '@/assets/login/bg.png'
import LocalSwitch from '@/components/language/localSwitch.vue'

import { useSiteSetting } from "@/hooks/siteSettings";
import { get, has } from "lodash-es";
import { useI18n } from "vue-i18n";
import { RouterView } from "vue-router";
const site = useSiteSetting();
const getLogoSize = () => {
  if (has(site.siteSetting.value.extends, "logo_size")) {
    //存在logo size
    const logoSize: any = site.siteSetting.value.extends.logo_size;
    return `width:${logoSize.width}px; height:${logoSize.height}px`;
  } else {
    return `width:158px;height:48px;`;
  }
};

const iconStyle = {
  background: `url(${site.siteSetting.value.logo}) no-repeat`,
  "background-size": "100%",
};

const { locale } = useI18n();
</script>

<template>
  <div class="relative w-screen h-screen overflow-hidden flex flex-col items-center justify-center">
    <div class="relative w-full h-full" :style="{
      'background-image': `url(${login_bg5})`,
      'background-size': 'cover',
      'background-position': '0 -38px',
      'padding-top': '15%'
    }">
      <!-- ... (unchanged) -->
      <div style="height: 48%;width: 100vw;" class="absolute z-5 w-full text-center text-white">

        <div
          :style="{ 'background': `url(${login_bg3})`, 'height': '100%', 'display': 'flex', 'flex-direction': 'column', 'align-items': 'center', 'text-align': 'left', 'background-repeat': 'no-repeat' }">
          <div style="width: 100%;padding-top: 5%;">

            <div style="padding-left: 7%;">
              <div>
                <img :src="login_bg4" :style="getLogoSize()"
                  style="transform: scale(1.8);margin-bottom: 60px;margin-left: 60px;" alt="">

              </div>
              <div class="text-4xl font-bold font-microsoft" style="font-size: 80px;font-family: 微软雅黑;">{{
                site.siteSetting.value.title.zh }}</div>
              <div class="text-2xl font-microsoft" style="font-size: 40px;font-family: 微软雅黑;margin-top: 40px;">{{
                site.siteSetting.value.title.en }}</div>
            </div>
            <div> </div>
          </div>

        </div>


        <div class="text-sm mt-8">
          <p v-for="item in site.siteSetting.value.copyright_login" class="text-white">
            {{ get(item, locale) }}
          </p>
        </div>
      </div>
      <div style="width:38%;height: 65% ;position: fixed;left: 55%;top: 21%;z-index: 999;">
        <RouterView></RouterView>
      </div>


    </div>
     <!-- 语言切换  -->
     <LocalSwitch></LocalSwitch> 
  </div>
</template>